<script setup>
import { ref } from 'vue'
import WelcomeDiv from '@/views/components/WelcomeDiv.vue'
import { UploadFilled, Plus } from '@element-plus/icons-vue'
import { billCarInService, billCarOutService } from '@/api/bill'

// 车辆进入
const inUploadRef = ref()
const inImage = ref()

const handleInImageChange = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    inImage.value = reader.result
  }
}

const submitInImage = async () => {
  if (!inImage.value) {
    ElMessage.error('图片不能为空')
    return
  }

  await billCarInService(inImage.value).then((response) => {
    ElMessage.success(response.message)
  })
}

// 车辆离开
const outUploadRef = ref()
const outImage = ref()

const handleOutImageChange = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    outImage.value = reader.result
  }
}

const submitOutImage = async () => {
  if (!outImage.value) {
    ElMessage.error('图片不能为空')
    return
  }

  await billCarOutService(outImage.value).then((response) => {
    ElMessage.success(response.message)
  })
}
</script>

<template>
  <el-container>
    <el-header>
      <h1>停车场管理系统</h1>
      <WelcomeDiv />
    </el-header>

    <el-main>
      <el-row>
        <el-col :span="12">
          <h2>车辆进入</h2>

          <el-upload
            ref="inUploadRef"
            class="img-uploader"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleInImageChange"
            drag
          >
            <img v-if="inImage" :src="inImage" class="img" />

            <el-icon v-else class="img-uploader-icon"><Plus /></el-icon>
          </el-upload>

          <el-button type="primary" @click="submitInImage"
            >放行车辆进入</el-button
          >
        </el-col>

        <el-col :span="12">
          <h2>车辆离开</h2>

          <el-upload
            ref="outUploadRef"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleOutImageChange"
            drag
            class="img-uploader2"
          >
            <img v-if="outImage" :src="outImage" class="img" />

            <div v-else class="tips">
              <el-icon class="img-uploader-icon"><upload-filled /></el-icon>

              <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
              </div>
            </div>

            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 1Mb
              </div>
            </template>
          </el-upload>

          <el-button type="primary" @click="submitOutImage">
            放行车辆离开
          </el-button>
        </el-col>
      </el-row>
    </el-main>

    <el-footer> ©2024 Created by lt</el-footer>
  </el-container>
</template>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100vh;
  /* 沾满视口高度 */
  background-color: #fff;

  .el-header {
    height: auto;
    background-color: var(--el-color-primary-light-8);
    margin-bottom: 10px;
    padding-bottom: 5px;

    h1 {
      text-align: center;
      font-size: 30px;
      color: #606266;
      height: 60px;
      line-height: 60px;
    }
  }

  .el-main {
    height: 100%;
    padding: 0;
    margin-bottom: 10px;

    .el-row {
      height: 100%;

      .el-col {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        width: 100%;

        .img-uploader {
          width: 80%;
          height: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          :deep() {
            .el-upload-dragger {
              height: 300px;
              width: 400px;
            }

            .el-upload:hover {
              border-color: var(--el-color-primary);
            }

            .el-icon.img-uploader-icon {
              font-size: 70px;
              color: #8c939d;
              width: 100%;
              height: 100%;
              text-align: center;
            }

            .img {
              width: 100%;
              height: 100%;
            }

            .el-upload-list {
              width: 40%;

              .el-upload-list__item-name {
                justify-content: center;
              }
            }
          }
        }

        .img-uploader2 {
          width: 80%;
          height: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          :deep() {
            .el-upload-dragger {
              height: 300px;
              width: 400px;
            }

            .el-upload:hover {
              border-color: var(--el-color-primary);
            }

            .tips {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              .el-icon.img-uploader-icon {
                font-size: 70px;
                color: #8c939d;
                width: 70%;
                height: 70%;
                text-align: center;
              }
            }
            .img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .el-footer {
    background-color: #f2f3f5;
    font-size: 10px;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
}
</style>
